7.2 How to drag-and-drop, and how to upload/download files

• Procedure?
  1. Make an element 'draggable'.
  2. Set what to drag - 'ondragstart' on the draggable element and 'eventObj.dataTransfer.setData(name, value)', e.g., eventObj.dataTransfer.setData("id", eventObj.target.id);.
  3. Set where to drop - 'ondragover' over a target, and 'eventObj.preventDefault()'. Note that the default action is not to allow 'drop'.
  4. Do the drop - 'ondrop' over the target, 'eventObj.preventDefault()', and 'eventObj.dataTransfer.getData(name)'. Note that the default action is to open as link on 'drop'.
  5. How to append an element to the target element?    eventObj.target.appendChild(document.getElementById(eventObj.dataTransfer.getData('id'));
• What does 'eventObj.preventDefault()' do?
• What is 'eventObj.dataTransfer'?

• PHP configuration - /etc/php/version/apache2/php.ini
• file_uploads = on

• Try and read the code and study carefully how to upload a file or files.
  • File Uploading with a Form,
  • File Uploading with a Form and jQuery .ajax()
  • File Uploading with a Form and Vanilla.js
• Which HTTP method should be used to upload a file or files?
  'post'
• What form 'enctype' value should be used for uploading a file?
  'multipart/form-data' only with 'method=post'; The default enctype is 'application/x-www-form-urlencoded' (All characters are encoded before sent (Spaces are converted to "+" symbols, and special characters are converted to ASCII HEX values.)). Read HTML <form> enctype Attribute for further information.
• What input 'type' value should be used for selecting a file or files?
  'file'
• The 'multiple' attribute in input?
• When is the 'change' event triggered?
• What are the fieldset and legend tags?
• What is eventObj.dataTransfer.files?
  • Is ...files from the file input element or the file drop box?
  • Is eventObj.dataTransfer.files from the file drop box (i.e., a drag and drop operation's DataTransfer object) or the file input element?
  • [You may skip this topic.] They are FileList objects that are the lists of File objects.
    • File.name
    • File.type
    • File.size
    • File.lastModifiedDate

• What does readFile() do?
• How is readFile() different from file_get_contents()?
• How to read a line?

• fopen()
• Which modes are used to open a file for read/write? Which one of them preserves the existing data in file or creates a new file if it doesn't exist?
• fclose()
• fread()
• fgets(), fgetc()
• feof()
• Can you write a program to count the number of lines stored in a file only with the above functions?
• Can you write a program to get the size of a file only with the above functions?
• Can you write a program to check if a file exists?

• fopen()
• fwrite()
• Can you create a file?
• Can you read and write in the same file? You may need to use fseek().

• $_FILES - HTTP file upload variable
• For one file:
  • $_FILES['name_sent_from_client']['name']
  • $_FILES['name_sent_from_client']['type']
  • $_FILES['name_sent_from_client']['tmp_name']
  • $_FILES['name_sent_from_client']['size']
• For multiple files:
  • $_FILES['name_sent_from_client']['name'][$i]
  • $_FILES['name_sent_from_client']['type'][$i]
  • $_FILES['name_sent_from_client']['tmp_name'][$i]
  • $_FILES['name_sent_from_client']['size'][$i]
• How to know how many files are being uploaded?
  boolean is_array($_FILES['name_sent_from_client']['name'])
• basename() - for filename without path? pathinfo()?
• What is the default maximum size of files that you can upload?
  upload_max_filesize in php.ini

<?php
$target_dir = "./uploads/";  // This directory should be accessible and writable for the web server.
echo "The number of files to upload is " . count($_FILES['fileToUpload']['name']) . '.<br>';  // full path
                                                      // 'fileToUpload[]' is the name of file type <input> in the client code.

for ($i = 0; $i < count($_FILES['fileToUpload']['name']); $i++) {
    $target_file = $target_dir . basename($_FILES['fileToUpload']['name'][$i]);  // basename() - just file name; e.g., .../test/ex.js => ex.js
    if (!file_exists($target_file)) {
        if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"][$i], $target_file))
            echo "The file " . basename( $_FILES["fileToUpload"]["name"][$i]) . " has been uploaded.<br>";
        else
            echo "Sorry, there was an error uploading your file.<br>";
    } else
        echo $target_file . ' already exists.<br>';
}
?>

• Do you have to open a local file and read it?
• How to to check the type of a file? Read the example code closely.
• FileReader.readAsText(), .readAsDataURL(), .readAsBinaryString(), .readAsArrayBuffer()